<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Common.js演示</title>
           <!-- 响应式布局 -->
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta charset="utf-8">
        <meta name = "format-detection" content = "telephone=no" />

        <link rel="icon" href="images/favicon.ico">
        <link rel="shortcut icon" href="images/favicon.ico" />
        <link href="index.css" rel="stylesheet">
        <link href="responsive.css" rel="stylesheet">
        <!-- 1.引用jquery库 -->
        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
        <!-- 2.引用官方的滚轮事件 -->
        <script type="text/javascript" src="jquery.mousewheel.min.js"></script>
        <!-- 3.引用插件库common.js -->
        <script type="text/javascript" src="common.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
     <!--==============================
                                Stuck menu
                    =================================-->
        <div class="container" style="z-index:1000">
        <!-- 手机菜单 -->
        <div class="iPhone">
                <a  href="javascript:void(0)" class="bt1" gname="点击它，会出现一篇文章">Home</a>
                <a href="javascript:void(0)" class="bt2" gname="点击它，会出现一个提示框">Tips</a>

                <a gname="点击它，瀑布流效果一" href="javascript:void(0)" class="bt3" effect=1 >效果一</a>
                <a gname="点击它，瀑布流效果二" href="javascript:void(0)" class="bt3" effect=2 >效果二</a>
                <a gname="点击它，瀑布流效果三" href="javascript:void(0)" class="bt3" effect=3 >效果三</a>
                <a gname="点击它，瀑布流效果四" href="javascript:void(0)" class="bt3" effect=4 >效果四</a>
                <a gname="点击它，瀑布流效果五" href="javascript:void(0)" class="bt3" effect=5 >效果五</a>
                <div class="common" gname="包括：幻灯片插件(Slide)，瀑布流插件(Waterfall)，滚动条插件(Scrolllist)，拖拽(Drag)，遮罩(Mask)，弹框(Popup)，鼠标移动提示(HoverTip)，导航静止(Fixed)，DIV居中(Cencer)">Commom.js演示(响应式布局)</div>
            </div>
        <!-- PC和ipad菜单 -->
            <div class="header_l">
                <a  href="javascript:void(0)" class="bt1" gname="点击它，会出现一篇文章">Home</a>
                <a href="javascript:void(0)" class="bt2" gname="点击它，会出现一个提示框">Tips</a>

                <a gname="点击它，瀑布流效果一" href="javascript:void(0)" class="bt3" effect=1 >效果一</a>
                <a gname="点击它，瀑布流效果二" href="javascript:void(0)" class="bt3" effect=2 >效果二</a>
                <a gname="点击它，瀑布流效果三" href="javascript:void(0)" class="bt3" effect=3 >效果三</a>
                <a gname="点击它，瀑布流效果四" href="javascript:void(0)" class="bt3" effect=4 >效果四</a>
                <a gname="点击它，瀑布流效果五" href="javascript:void(0)" class="bt3" effect=5 >效果五</a>
                <div class="common" gname="包括：幻灯片插件(Slide)，瀑布流插件(Waterfall)，滚动条插件(Scrolllist)，拖拽(Drag)，遮罩(Mask)，弹框(Popup)，鼠标移动提示(HoverTip)，导航静止(Fixed)，DIV居中(Cencer)">Commom.js演示(响应式布局)</div>
            </div>
            <div class="meun" effect=5 >菜单</div>

        </div>
        <!--==============================
                          header
            =================================-->
        <div class="A">
            <div class="frame">
                <ul class="slideframe">
                    <li class="slideImg">
                        <img src="photo/a.jpg"></li>
                    <li class="slideImg">
                        <img src="photo/b.jpg"></li>
                    <li class="slideImg">
                        <img src="photo/c.jpg"></li>
                </ul>
                <div class="pre"></div>
                <div class="next"></div>
                <ul class="num">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
        </div>
       
        <!--=====================
                      Content
            ======================-->
            <div class="loading"></div>
        <div style="height:600px;width:95%; margin: 0 auto;
        ">

            <div class="main">
            </div>

        </div>
        <!--==============================
                      footer
        =================================-->
        <a href="#" id="toTop" class="fa fa-chevron-up"></a>
        <div class="warming">
            <div class="tip">
                散文
                <a href="javascript:void(0)" class="close">×</a>
            </div>
            <div id="inlist">
                <p>仅存的记忆渐渐被时光蚕食，仃伶不堪。过山过水后，回望江南，伊人何在？</p>
                <p>这年夏，谨此记录，以兹留念。</p>
                <br/>

                <p>1.追忆，只是……我们再也回不到过去</p>
                <br/>

                <p>
                    一晃又是一年夏，真的过的好快，还来不及听时间流逝。像摩天轮飞快的旋转却终究不能脱离既定轨道一般我也终究不能脱离，我永无休止的寻找，寻找属于自己的幸福，哪怕根本看不见。
                </p>
                <br/>
                <p>
                    如今的我，喜欢一个人沿着公路看着自己脚尖一直走走到筋疲力尽，然后停下来四处张望，看阳光灼痛心房直到疼的快要死去，就像人生旅程般疼痛无助却又必须坚持且笑容满面。有人说我越来越冷漠，我却不以为然，我只是学会了孤独。我开始在孤独中一厢情愿的去描绘我五彩斑斓的未来，像个孩子绘画般虽然只是梦。我可以坐在电脑旁一小时之内看着某个角落发呆，直到雪花大团大团的盖下来堆满整个屏幕，白色如同一场华丽的葬礼，排山倒海铺天盖地。
                </p>
                <br/>
                <p>
                    我并不是一个寂寞的人，我有很多朋友，但我很少和他们联系，以至于让朋友们忘记了我。我想我真是一个应该被忘记的人。而我却依然执着着记忆，我用刻刀一一记录下他们的名字最后深入骨髓。有人说越痛就越不容易忘记。
                </p>
                <br/>
                <p>
                    我总是想起以前的朋友，想起小明、二狗、无娃以及飞吻。
                    想起那些逃课无法无天张扬到放肆的日子。我们沿着环城路静静的走，安静的抽烟，抽很多的烟。我们都很累，为了自己的大学孤注一掷，像过独木桥，而桥上却布满荆棘，无论过去还是过不去都注定伤痕累累……
                    想起那段视台球如生命的日子。大叠大叠的试卷写到手酸依然堆积如山，令人快要窒息。我们不得不寻找枯燥乏味之外的一丝欣慰，于是我们开始玩台球，近乎疯狂以至迷恋的玩。就如同受伤的孩子总是哭着叫妈妈以寻求得到慰籍，我们也需要疗伤。
                </p>
                <br/>
                <p>
                    想起那些颓废到有点萎靡的日子。我们可以在没有路灯，昏暗到看不见彼此的角落一起喝酒。然后一起开始歇斯底里的吼，直到沙哑，直到再也吼不出来。酒精总是很好的麻醉剂，但当伤口疼痛到麻木时酒精又有何用？我们总是无力的伪装着，等灾难（好比高考）悄无声息的降临时，才知道力不从心……
                </p>
                <br/>
                <p>
                    通常能坚持到最后还游刃有余的人就应该是圣人。显然我不是。我想我应该是那种想坚持却半途逃跑的庸人，准确一点应叫懦夫，而且是个很彻底的懦夫。高考前不知道多少天我离开了，离开了我的朋友们，离开了小明、二狗、无娃以及飞吻。虽然是因为某些不想提及的原因。很难想象当时我是怀着怎样的心情离开的，是疲惫后的解脱，是解脱后的高兴，是高兴之余的不忍，还是不忍离开我的那些朋友们！或许全都是……
                </p>
                <br/>
                <p>亲爱的朋友们，我依然执着的眷恋着你们，我好想回到丢失你们的那个夏天，然后一起笑言，一起记忆，一起匍匐前行。</p>
                <br/>
                <p>......</p>
            </div>
            <div class="fot"></div>
        </div>
        <div class="tips2" style="z-index:1;display:none"></div>
        <div class="foot">2015 © Commom.js@张龄伟</div>
        <a href="javascript:void(0)" class="top">Top</a>
    </body>
</html>